<script setup lang="ts">
import { onMounted, ref } from "vue";
import Spreadsheet from "x-data-spreadsheet";
import cupAndSandList from "./data/cupAndSand.json";
import headAttributeList from "./data/headAttribute.json";
import SubAttributeList from "./data/SubAttribute.json";
import origin from "./data/origin.json";
import { option } from "./data/xconfig.js";
const value = ref("");
const value1 = ref([]);
const xs = ref(null);
const computedMerges = ref([]);
const commonStyle = ref({
  border: {
    bottom: ["thin", "#e6e6e6"],
    top: ["thin", "#e6e6e6"],
    left: ["thin", "#e6e6e6"],
    right: ["thin", "#e6e6e6"]
  }
}); // 公共样式
const cols = ref({
  0: { width: 100 }
}); // 列配置

const customStyles = ref([
  { ...commonStyle.value, bgcolor: "#FFEEAD" }, // 0 黄色块
  { ...commonStyle.value, bgcolor: "#ff0000", color: "#fff" }, // 1 红底白字
  { ...commonStyle.value, bgcolor: "#2741b1", color: "#fff" }, // 2 深蓝色块
  { ...commonStyle.value, bgcolor: "#99beff" }, // 3 浅蓝色块
  { ...commonStyle.value, bgcolor: "#2a72f3", color: "#fff" }, // 4 中蓝色块，左边数据
  { ...commonStyle.value, bgcolor: "#C7ECFF" }, // 5 淡蓝色
  { ...commonStyle.value, bgcolor: "#fff" }, // 6 白色，右边数据
  { ...commonStyle.value, bgcolor: "#E99899" }, //7 淡粉色
  { ...commonStyle.value, bgcolor: "#000", color: "#fff" }, //8 黑色
  { ...commonStyle.value, bgcolor: "#e5f6ff" } //
]);
const sheetData = ref(origin);
const loadData = ref({
  name: "sheet1",
  // freeze: "F3", // 冻结窗口 坐标点为单元格的原点
  merges: computedMerges.value,
  styles: customStyles.value,
  cols: cols.value,
  rows: sheetData.value
});

onMounted(() => {
  if (!xs.value) {
    const s = new Spreadsheet("#x-spreadsheet-demo", option);
    xs.value = s;
  }
  xs.value.loadData(loadData.value);
  xs.value.validate();
});

defineOptions({
  name: "Welcome"
});
</script>

<template>
  <div>
    <div class="mb-5 flex gap-5">
      <el-select v-model="value" placeholder="请选择时之沙主属性" style="width: 240px">
        <el-option v-for="item in cupAndSandList" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="value" placeholder="请选择空之杯主属性" style="width: 240px">
        <el-option v-for="item in cupAndSandList" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="value" placeholder="请选择理之冠主属性" style="width: 240px">
        <el-option v-for="item in headAttributeList" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="value1" multiple placeholder="请选择副属性" style="width: 640px">
        <el-option v-for="item in SubAttributeList" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-button type="primary">查询</el-button>
      <el-button type="success">清空</el-button>
    </div>
    <div>
      <div id="x-spreadsheet-demo" />
    </div>
    <!-- <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="primaryAttribute" label="primaryAttribute" />
      <el-table-column prop="SubAttribute" label="SubAttribute" />
    </el-table> -->
  </div>
</template>
